<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='用户列表')">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<script type="text/javascript" th:src="@{/js/basic/groupUser.js}"></script>
<div th:replace="basic/components/userInfoDialog"></div>
<body>
	<div id="app" v-cloak>
		<el-container>
		  <el-header style="margin-top:20px;height:30px;">
			  <input type="hidden" id="groupId" v-model="groupId" th:value="${groupId}" />
			  <input type="hidden" id="isAdmin" v-model="isAdmin" th:value="${isAdmin}" />
			  <el-button-group style="padding-bottom:10px;">
				  <el-button size="mini" @click="goBack"><i class="el-icon2-arrowleft" ></i> 返回</el-button>
				  <el-button type="primary" size="mini" @click="addUserToGroup"><i class="layui-icon layui-icon-group"></i> 增加组内用户</el-button>
				  <el-button type="primary" size="mini" @click="removeUser"><i class="layui-icon layui-icon-friends"></i> 移除组内用户</el-button>
				  <el-button type="primary" size="mini" @click="setAdmin('1')"><i class="layui-icon layui-icon-face-smile"></i> 设置为管理员</el-button>
				  <el-button type="primary" size="mini" @click="setAdmin('0')"><i class="layui-icon layui-icon-face-cry"></i> 取消管理员</el-button>
			  </el-button-group>
		  </el-header>
		  <el-main>
			  <el-table  
		   	    ref="userGroupDatagrid" 
		   	    :data="datagrid"
			    tooltip-effect="dark"
			    :height="tableHeight"
			    style="width: 100%;"
			    @row-click="datagridSelect"
			    highlight-current-row
			    >
			    <el-table-column type="index" label="序号"  width="50"></el-table-column>
			    <el-table-column prop="name" label="账号" show-overflow-tooltip> </el-table-column>
			    <el-table-column prop="nickName" label="昵称" show-overflow-tooltip> </el-table-column>
			    <el-table-column prop="isAdmin" label="是否管理员" show-overflow-tooltip> 
			    	<template slot-scope="scope">
			   			{{ formatterStatus(scope.row) }}
			   		</template>
			    </el-table-column>
			  </el-table>
			  <div class="pagination_wrap">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[10, 20, 40, 100]"
			      :page-size="queryData.rows"
			      :layout="pagination_layout"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
			 </div>
			</el-main>
		</el-container>
		
		<userforgroup-dialog ref="user" @user="selectUser"></userforgroup-dialog>
	</div>
</body>
</html>